import React from 'react';
import PropTypes from 'prop-types';
import {Grid, List} from 'antd-mobile';

class BossInfo extends React.Component {

    constructor(props){
        super(props);
        this.state = {}
    }

    render() {
        const avatarList = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra'
            .split(',')
            .map(value => ({
                icon: require(`../images/${value}.png`),
                text: value
            }));

        const gridHeader = this.state.text
            ? (
                <div>
                    <span>已选择头像:</span>
                    <img style={{width: 20}} src={this.state.icon} alt={this.state.text} />
                </div>
            )
            : (<div>请选择头像:</div>);
        return (
            <div>
                <List renderHeader={() => gridHeader}>
                    <Grid data={avatarList} columnNum={5}
                          onClick={elem => {
                              this.setState(elem);
                              this.props.selectAvatar(elem.text);
                          }}/>
                </List>
            </div>
        )
    }
}

BossInfo.propTypes = {
    selectAvatar: PropTypes.func.isRequired
};

export default BossInfo;